<template>
  <sweet-custom-select resizable :border="true" placement="bottom-end" v-model:show="show" width="310" style="width: 200px">
    <sweet-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick" />
  </sweet-custom-select>
  <sweet-button type="primary" style="margin-left: 40px" @click="click">点击事件</sweet-button>
</template>

<script setup lang="ts">
import {ref} from 'vue';
interface Tree {
  label: string;
  children?: Tree[];
}

const data: Tree[] = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1'
          }
        ]
      }
    ]
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1'
          }
        ]
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1'
          }
        ]
      }
    ]
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1'
          }
        ]
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1'
          }
        ]
      }
    ]
  }
];
const defaultProps = {
  children: 'children',
  label: 'label'
};

const show = ref(false);

function handleNodeClick(data: Tree) {
  console.log(data);
}

function click() {
  show.value = !show.value;
}
</script>
